<template>
	<view>
		<u-navbar :background="background" back-text="" :back-text-style="{color: '#fff'}" title-color="#fff" back-icon-color="#ffffff">
			<view class="icon-wrap">
				<view class="download" @click="downloadTap">
					<u-icon name="download"></u-icon>
				</view>
				<view class="star" @click="star">
					<u-icon name="star" v-show="this.favorite===0"></u-icon>
					<u-icon name="star-fill" v-show="this.favorite===1"></u-icon>
				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, #007fd1, #013cd2)'
				},
				favorite:null
			}
		},
		props: {
			favoriteCount: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		methods: {
			downloadTap() {
				this.$emit('download')
			},
			star() {
				if (this.favorite === 0) {
					this.favorite = 1
				} else {
					this.favorite = 0
				}
				this.$emit('star')
			}
		},
		created(){
			this.favorite = this.favoriteCount
		}
	}
</script>

<style lang="scss">
	.icon-wrap {
		box-sizing: border-box;
		padding-right: 30rpx;
		display: flex;
		flex: 1; // 让slot内容占满整个导航栏的宽度 
		flex-direction: row-reverse;
		align-items: center;
		color: #FFFFFF;
		font-size: 15px;

		// font-weight: bold;
		/* 让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
		.star {
			box-sizing: border-box;
			padding-right: 30rpx;
		}
	}
</style>
